<template>
  <div class="SignIn_new">
    <navigation image_="0" title="达人堂享特权" :scrollTop="false" :show="true" v-on:getHeight="getHeight($event)"
      id="header" />
    <!-- 头部信息 -->
    <div class="top_title" :style="{ marginTop: Height + 'px' }">
      <img class="title_header" src="https://img.xunyinjiaoyou.com/static/activity/SignIn_new/talent_title@2x.png"
        alt="">
      <div class="hader_image">
        <img src="https://img.xunyinjiaoyou.com/static/activity/SignIn_new/talent_no.1@2x.png" alt="">
        <img v-if="gift_rank[0].userId" :src="gift_rank[0].headPic" alt="">
        <img v-else src="https://img.xunyinjiaoyou.com/static/activity/SignIn_new/emoty_img@2x.png" alt=""
          style="width: 30vw;height:30vw">
      </div>
      <div class="name_sex">
        <img v-if="gift_rank[0].sex == 1 && gift_rank[0].userId" src="../../public/img/other/boy_lab.png" alt="">
        <img v-if="gift_rank[0].sex == 2 && gift_rank[0].userId" src="../../public/img/other/girl_lab.png" alt="">
        <span v-if="gift_rank[0].userId">{{splice_(gift_rank[0].nickname)}}</span>
        <span v-else>虚位以待</span>
      </div>
      <div v-if="gift_rank[0].userId" class="num_first_rank1">{{num_con(gift_rank[0].num)}}朵玫瑰</div>
      <div class="CurrentRose">
        <div>
          <div class="left_information">
            <span>当前玫瑰数量</span>
            <div>
              <img src="https://img.xunyinjiaoyou.com/static/activity/SignIn_new/flower_img@2x.png" alt="">
              <span>{{gift_num}}</span>
            </div>
          </div>
          <div class="right_button">
            <div v-if="sign_status==0" class="signin" @click="singin_">签到得玫瑰</div>
            <div v-if="sign_status==1" class="over_signin">已完成</div>
            <div v-if="sign_status==2" class="timeDame_">
              <van-count-down :time="show_next_Time" @finish="SignIn_new">
                <template v-slot="timeData">
                  <div class="item">{{ timeData.minutes>0?timeData.minutes+'分后签到':timeData.seconds+'秒后签到'}}</div>
                </template>
              </van-count-down>
            </div>
            <div class="buy_meigui" @click="model_prize=true">购买</div>
          </div>
        </div>
      </div>
    </div>

    <!-- tab切换 -->
    <div class="tab_switch">

      <!-- 切换 -->
      <div class="tabbar">
        <div :class="cur==1?'active':''" @click="tab_list(1)">今日实时榜</div>
        <div :class="cur==2?'active':''" @click="tab_list(2)">达人堂</div>
      </div>
      <!-- 倒计时 -->
      <div class="countDown" v-if="cur==1">
        <van-count-down :time="showTime" @finish="SignIn_new">
          <template v-slot="timeData">
            距离截榜还剩
            <div class="item">{{ timeData.hours|formatDate }}</div>时
            <div class="item">{{ timeData.minutes|formatDate }}</div>分
            <div class="item">{{ timeData.seconds|formatDate }}</div>秒
          </template>
        </van-count-down>
      </div>

      <!-- 列表 -->
      <div class="rank_list">
        <!-- 刷新 -->
        <div class="Refresh" @click="Refresh_" v-if="cur == 1">
          <img :class="Refresh_class?'Refresh_class':''"
            src="https://img.xunyinjiaoyou.com/static/activity/SignIn_new/shuaxin_icon@2x.png" alt="">
          <span>刷新</span>
        </div>
        <img class="header_kuang"
          src="https://img.xunyinjiaoyou.com/static/activity/SignIn_new/talent_list_frame1@2x.png" alt="">
        <div class="center_list">
          <div class="center_informa" v-if="cur == 1">
            <div v-for="item,index in splice_list" :key="index" class="single">
              <div class="rank_list2">{{index+2}}</div>
              <div class="header_border_"><img :src="item.headPic" alt=""></div>
              <div class="name_sex_">
                <span>{{splice_(item.nickname)}}</span>
                <img v-if="item.sex == 1" src="../../public/img/other/boy_lab.png" alt="">
                <img v-else src="../../public/img/other/girl_lab.png" alt="">
              </div>
              <div class="right_mun">{{num_con(item.num)}}朵玫瑰</div>
            </div>
          </div>
          <div class="month_list" v-if="cur == 2">

            <div class="most_quanbu flash-list" ref="ref_top">
              <div v-for="item,index in user_wall.length" :key="index" @click="leaderwallMonth(index+1,$event)"
                :class="cur_tab == item?'list_center_nor active2':'list_center_nor'" ref="button">
                <img v-if="cur_tab == item"
                  src="https://img.xunyinjiaoyou.com/static/activity/SignIn_new/time_select_img@2x.png" alt="">
                <img v-else src="https://img.xunyinjiaoyou.com/static/activity/SignIn_new/time_nor@2x.png" alt="">
                <img src="https://img.xunyinjiaoyou.com/static/activity/SignIn_new/time2@2x.png"
                  v-if="item != user_wall.length" alt="">
                <span>{{item}}月</span>
              </div>
            </div>

            <div class="center_list_nth" @scroll="scrollEvent" ref="selectFiles">
              <div v-for="item,index in user_wall" :key="index" class="center_box">
                <div class="nth_moth_" :id="'month'+(index+1)*1">
                  <div></div>{{index+1}}月
                </div>
                <div class="content_list">
                  <div v-for="items,indexs in item" :key="indexs" @click="open_usrt(items.user_id)"
                    :class="indexs==0?'img_biaoti img_biaoti_active':'img_biaoti'">
                    <img v-if="indexs==0"
                      src="https://img.xunyinjiaoyou.com/static/activity/SignIn_new/daren_list_frame1@2x.png" alt="">
                    <img v-else src="https://img.xunyinjiaoyou.com/static/activity/SignIn_new/daren_list_frame2@2x.png"
                      alt="">
                    <img alt="" v-lazy="items.head_pic">
                    <div class="name_time">
                      <div>{{items.nickname}}</div>
                      <div>{{ items.add_date.substr(5, 5) }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <img class="bottom_kuang"
          src="https://img.xunyinjiaoyou.com/static/activity/SignIn_new/talent_list_frame3@2x.png" alt="">
      </div>
    </div>
    <!-- 达人堂享特权 -->
    <div class="Darentang">达人特权</div>
    <!-- 排名奖励 -->
    <div class="rank_prize">
      <img class="top_kuang_" src="https://img.xunyinjiaoyou.com/static/activity/SignIn_new/talent_list_frame1@2x.png"
        alt="">
      <div class="center_rang_prize">
        <img class="rank_title_" src="https://img.xunyinjiaoyou.com/static/activity/SignIn_new/top1_text@2x.png" alt="">
        <div class="rank_title_2">{{prize_list[0].gift_name}}</div>
        <div class="ran1_texiao">
          <img :src="prize_list[0].gift_pic" alt="">
          <div class="time_" v-if="prize_list[0].multiple_num">{{prize_list[0].multiple_num}}天</div>
        </div>
        <div class="rank1_header_img">
          <div class="rank_prize2">
            <div class="top_bjk_ce">
              <img :src="prize_list[1].gift_pic" alt="">
              <div v-if="prize_list[1].multiple_num">{{prize_list[1].multiple_num}}天</div>
            </div>
            <div class="name_prizr_">
              {{prize_list[1].gift_name}}
            </div>
          </div>
          <div class="rank_prize2">
            <div class="top_bjk_ce">
              <img :src="prize_list[2].gift_pic" alt="">
              <div v-if="prize_list[2].multiple_num">{{prize_list[2].multiple_num}}天</div>
            </div>
            <div class="name_prizr_">
              {{prize_list[2].gift_name}}
            </div>
          </div>
        </div>
        <div class="rank1_header_img rank1_header_img23">
          <div class="rank_prize2">
            <img src="https://img.xunyinjiaoyou.com/static/activity/SignIn_new/top2_text@2x.png" alt="">
            <img src="https://img.xunyinjiaoyou.com/static/activity/SignIn_new/interest_arrow_img@2x.png" alt="">
            <div class="top_bjk_ce">
              <img :src="prize_list[3].gift_pic" alt="">
              <div v-if="prize_list[3].multiple_num">{{prize_list[3].multiple_num}}天</div>
            </div>
            <div class="name_prizr_">
              {{prize_list[3].gift_name}}
            </div>
          </div>
          <div class="rank_prize2">
            <img src="https://img.xunyinjiaoyou.com/static/activity/SignIn_new/top3_text@2x.png" alt="">
            <img src="https://img.xunyinjiaoyou.com/static/activity/SignIn_new/interest_arrow_img@2x.png" alt="">
            <div class="top_bjk_ce">
              <img :src="prize_list[4].gift_pic" alt="">
              <div v-if="prize_list[4].multiple_num">{{prize_list[4].multiple_num}}天</div>
            </div>
            <div class="name_prizr_">
              {{prize_list[4].gift_name}}
            </div>
          </div>
        </div>
      </div>
      <img class="bottom_kuang_"
        src="https://img.xunyinjiaoyou.com/static/activity/SignIn_new/talent_list_frame3@2x.png" alt="">
    </div>
    <!-- 活动规则 -->
    <div class="Darentang">活动规则</div>
    <div class="res_rule_infor">
      <div>
        <span style="padding-top:8px">1. 每天获得玫瑰数量第一名获得达人称号;</span>
        <span>2. 达人头像框有效期分别为7天,3天,1天; </span>
        <span>3. 达人堂勋章为永久有效,每天第一名获得;</span>
        <span>4. 获得玫瑰方式为签到或购买,每朵玫瑰10钻;</span>
        <span>5.每小时可签到一次,每人每天最多可签到5次.</span>
      </div>
    </div>
    <van-popup v-model="model_prize" :close-on-click-overlay="false">
      <div class="mode_meigui_buy">
        <img @click="model_prize = false;number_list=''" class="close_btn"
          src="https://img.xunyinjiaoyou.com/static/activity/SignIn_new/popup_close_icon@2x.png" alt="">
        <img class="top_back" src="https://img.xunyinjiaoyou.com/static/activity/SignIn_new/talent_list_frame1@2x.png"
          alt="">
        <img class="bottom_back"
          src="https://img.xunyinjiaoyou.com/static/activity/SignIn_new/talent_list_frame3@2x.png" alt="">
        <div class="close_btn2">购买玫瑰花</div>
        <div class="center_info">
          <div class="list_imforin">
            <div class="hui_Price">
              <div class="first_ont">
                <div class="discount"></div>
                <div class="huan_into" @click="calist_tab(1)">
                  <img src="https://img.xunyinjiaoyou.com/static/activity/SignIn_new/300.png" alt="">
                  <img src="https://img.xunyinjiaoyou.com/static/activity/SignIn_new/flower_img@2x.png" alt="">
                  <span>3000</span>
                  <div v-if="tab_cur_ == 1">✓</div>
                </div>
              </div>
              <div class="first_ont">
                <div class="discount">限时9.6折</div>
                <div class="huan_into" @click="calist_tab(2)">
                  <img src="https://img.xunyinjiaoyou.com/static/activity/SignIn_new/1000.png" alt="">
                  <img src="https://img.xunyinjiaoyou.com/static/activity/SignIn_new/flower_img@2x.png" alt="">
                  <span>9600</span>
                  <div v-if="tab_cur_ == 2">✓</div>
                </div>
              </div>
              <div class="first_ont">
                <div class="discount">限时8.6折</div>
                <div class="huan_into" @click="calist_tab(3)">
                  <img src="https://img.xunyinjiaoyou.com/static/activity/SignIn_new/3000.png" alt="">
                  <img src="https://img.xunyinjiaoyou.com/static/activity/SignIn_new/flower_img@2x.png" alt="">
                  <span>25800</span>
                  <div v-if="tab_cur_ == 3">✓</div>
                </div>
              </div>
            </div>
            <input class="ipt_npt" type="number" placeholder="请输入购买数量" v-model="number_list"
              oninput="if(value.length > 8)value = value.slice(0, 8)" />
            <div class="span_init">
              <span>每朵玫瑰需消耗10钻</span>
              <span>共消耗{{consume()}}钻</span>
            </div>
            <div class="btn_gift" @click="gifv_meigui">购买</div>
          </div>
        </div>
      </div>
    </van-popup>

  </div>
</template>

<script>
  import wx from 'weixin-js-sdk'
  import {
    Toast,
    Dialog
  } from "vant";
  import navigation from "../../components/navigation";
  import smoothscroll from 'smoothscroll-polyfill'
  export default {
    data() {
      return {
        active: 0, // 当前激活的导航索引
        tab_cur_: '',
        number_list: '', //数量
        model_prize: false, //购买玫瑰
        cur_tab: 1, //月份
        cur: 1,
        isiOS: false,
        Height: 48,
        gift_rank: [{
          headPic: '',
          nickname: ''
        }], //今日榜
        splice_list: [], //2-9名
        user_wall: [], //达仁堂
        gift_num: "", //玫瑰数量
        sign_status: 0, //是否签到
        slide: false, //是否允许滚动事件触发
        prize_list: [{
            "type": 1,
            "gift_id": 128,
            "gift_name": "达人堂进场特效",
            "gift_type": 3,
            "gift_pic": "http://img.xunyinjiaoyou.com/upload/goods/202205/31/1653984295.png?x-oss-process=image/resize,w_300",
            "multiple_num": 7
          },
          {
            "type": 1,
            "gift_id": 66,
            "gift_name": "达人堂头像框",
            "gift_type": 3,
            "gift_pic": "http://img.xunyinjiaoyou.com/upload/goods/202109/13/1631501701.png?x-oss-process=image/resize,w_300",
            "multiple_num": 7
          },
          {
            "type": 1,
            "gift_id": 5,
            "gift_name": "达人堂勋章",
            "gift_type": 4,
            "gift_pic": "http://img.xunyinjiaoyou.com/upload/medal/daren-static.png?x-oss-process=image/resize,w_300",
            "multiple_num": 0
          },
          {
            "type": 2,
            "gift_id": 67,
            "gift_name": "达人堂头像框",
            "gift_type": 3,
            "gift_pic": "http://img.xunyinjiaoyou.com/upload/goods/202109/13/1631501729.png?x-oss-process=image/resize,w_300",
            "multiple_num": 3
          },
          {
            "type": 3,
            "gift_id": 67,
            "gift_name": "达人堂头像框",
            "gift_type": 3,
            "gift_pic": "http://img.xunyinjiaoyou.com/upload/goods/202109/13/1631501729.png?x-oss-process=image/resize,w_300",
            "multiple_num": 1
          },
        ], //奖品列表
        Refresh_class: false, //刷新
        showTime: '', //截榜倒计时
        show_next_Time: '', //下一次签到
        top_list: true, //顶上还有数据
        bottom_list: true, //底部还有数据
      };
    },
    components: {
      navigation,
    },
    created() {
      this.SignIn_new()
    },
    watch: {
      number_list: {
        handler: function () {
          // if (this.number_list < 100) {
          this.tab_cur_ = '';
          let num = Math.floor(Math.abs(this.number_list)) == 0 ? '' : Math.floor(Math.abs(this.number_list));
          this.number_list = num;
          // } else if (this.number_list < 1000) {
          //   this.tab_cur_ = '1';
          // } else if (this.number_list < 3000) {
          //   this.tab_cur_ = '2';
          // } else {
          //   this.tab_cur_ = '3';
          // }
        },
        deep: true,
      },
    },
    filters: {
      formatDate(time) {
        if (time < 10) {
          return '0' + time
        } else {
          return time
        }
      },
    },
    mounted() {
      // 监听滚动事件
      var u = navigator.userAgent;
      var ua = navigator.userAgent.toLowerCase(); //微信小程序 
      this.isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      if (ua.match(/MicroMessenger/i) == "micromessenger") {
        // Toast('微信')
        this.Height = 0;
      } else {
        //console.log('app')
      }
    },
    methods: {

      consume() {
        if (this.number_list < 1000) {
          return this.number_list * 10
        } else if (this.number_list < 3000) {
          return Math.floor(this.number_list * 9.6);
        } else {
          return Math.floor(this.number_list * 8.6)
        }

      },
      SignIn_new() {
        let arys = {}; //参数
        let url = "/activity/leaderwall";
        this.$.encryption2(arys, url).then((res) => {
          if (res.data.status == 0) {
            if (res.data.result.gift_rank.length) {
              this.gift_rank = res.data.result.gift_rank; //今日榜
              this.splice_list = this.gift_rank.slice(1)
            }
            this.gift_num = res.data.result.gift_num; //玫瑰数
            this.prize_list = res.data.result.prize_list; //奖品列表
            this.sign_status = res.data.result.sign_status; //签到否

            const nowDate = new Date()
            const nowtime = parseInt(nowDate.getTime())

            this.showTime = res.data.result.end_time * 1000 - nowtime

            if (this.showTime < 0) {
              this.showTime = 0
            }

            this.show_next_Time = res.data.result.sign_next_time * 1000 - nowtime


            setTimeout(() => {
              this.Refresh_class = false
            }, 2000)
          } else {
            Toast(res.data.text);
          }
        })
      },
      async tab_list(tab) {
        this.cur = tab;
        if (tab == 1) {
          this.cur_tab = 1;
        } else if (tab == 2) {
          this.leaderwallYear_all();
        }

      },

      leaderwallYear_all() {
        let arys = {
          year: '2022'
        }; //参数
        let url = "/activity/leaderwallYear";
        this.$.encryption2(arys, url).then((res) => {
          if (res.data.status == 0) {
            this.user_wall = res.data.result.user_wall;
            this.user_wall = Object.values(this.user_wall);
            this.cur_tab = this.user_wall.length;
            this.$nextTick(() => {
              this.$refs['button'][this.user_wall.length - 1].click()
              setTimeout(() => {
                const scrollBox = document.getElementsByClassName('flash-list') //获取最外层的元素
                scrollBox[0].scrollLeft = 999;
              }, 1500)
            })
          }
        })
      },

      scrollEvent(e) {
        if (this.slide) {
          return
        }
        if (this.cur_tab > this.user_wall.length) {
          return this.cur_tab--
        }

        let base = 538; //校准不同手机scrollTop基数
        let CAB = Math.round(e.srcElement.clientHeight / base * 100) / 100; //获得与基数相差倍数
        let point = Math.round(e.srcElement.scrollTop / CAB); //与倍数校验算出统一scrollTop
     
        if (point < 850) {
          this.cur_tab = 1
        } else if (point < 2095) {
          this.cur_tab = 2
        } else if (point < 3456) {
          this.cur_tab = 3
        } else if (point < 4710) {
          this.cur_tab = 4
        } else if (point < 6060) {
          this.cur_tab = 5
        } else if (point < 7310) {
          this.cur_tab = 6
        } else if (point < 8670) {
          this.cur_tab = 7
        } else if (point < 10028) {
          this.cur_tab = 8
        } else if (point < 11276) {
          this.cur_tab = 9
        } else if (point < 12632) {
          this.cur_tab = 10
        } else if (point < 13886) {
          this.cur_tab = 11
        } else {
          this.cur_tab = 12
        }
        // 顶部居中月份
        this.$nextTick(() => {
          var anchor = document.getElementsByClassName('list_center_nor')[this.cur_tab - 1];
          const spanLeft = anchor.offsetLeft //当前点击的元素左边距离
          const divBox = document.getElementsByClassName('active2')[0].clientWidth / 2 //点击的元素一半宽度
          const totalWidths = document.body.clientWidth //屏幕总宽度
          const widths = document.body.clientWidth / 2 //一半的屏幕宽度
          const spanRight = totalWidths - spanLeft //元素的右边距离
          const scrollBox = document.getElementsByClassName('flash-list') //获取最外层的元素
          const scrollL = scrollBox[0].scrollLeft //滚动条滚动的距离
          if (spanLeft > widths || spanRight > widths) { //当元素左边距离大于屏幕一半宽度  或者  右边距离大于屏幕一半距离的时候
            scrollBox[0].scrollLeft = scrollL + (spanLeft - widths) + divBox //滚动条最终的滚动距离
          }
        })
      },
      async leaderwallMonth(month, event) {
        this.slide = true; //封锁滚动事件触发从而修改cur_tab
        this.cur_tab = month;
        const spanLeft = event.clientX //当前点击的元素左边距离
        const divBox = document.getElementsByClassName('active2')[0].clientWidth / 2 //点击的元素一半宽度
        const totalWidths = document.body.clientWidth //屏幕总宽度
        const widths = document.body.clientWidth / 2 //一半的屏幕宽度
        const spanRight = totalWidths - spanLeft //元素的右边距离
        const scrollBox = document.getElementsByClassName('flash-list') //获取最外层的元素
        const scrollL = scrollBox[0].scrollLeft //滚动条滚动的距离
        if (spanLeft > widths || spanRight > widths) { //当元素左边距离大于屏幕一半宽度  或者  右边距离大于屏幕一半距离的时候
          scrollBox[0].scrollLeft = scrollL + (spanLeft - widths) + divBox //滚动条最终的滚动距离
        }
        var anchor = await this.$el.querySelector("#month" + month);

        await smoothscroll.polyfill(); //兼容ios
        await anchor.scrollIntoView({
          block: "start", //ios不支持block属性
          behavior: "smooth",
        });

        setTimeout(() => { //回正
          window.scrollTo({
            top: this.$refs['ref_top'].getBoundingClientRect().top + window.scrollY -
              150, //getBoundingClientRect 相对于当前视口的位置
            behavior: "smooth" // 平滑滚动
          });
          this.slide = false; //结束封锁
        }, 1500)
      },
      gifv_meigui() {
        if (this.number_list < 1) {
          return Toast('数量不能为空')
        }
        Dialog.confirm({
            message: `确认消耗${this.consume()}钻石购买玫瑰花`,
            confirmButtonColor: '#2f73db',
            cancelButtonColor: '#909090'
          })
          .then(() => {
            // on confirm
            this.buygift()
          })
          .catch(() => {
            // on cancel
          });

      },
      buygift() {
        let arys = {
          num: this.number_list
        }; //参数
        let url = "/activity/buygift";
        this.$.encryption2(arys, url).then((res) => {
          if (res.data.status == 0) {
            this.SignIn_new();
            this.model_prize = false;
            this.number_list = '';
          }
          Toast(res.data.text)

        })
      },




      singin_() {
        let arys = {}; //参数
        let url = "/activity/leaderSign";
        this.$.encryption2(arys, url).then((res) => {
          if (res.data.status == 0) {
            this.SignIn_new()
            Toast(res.data.text)
          }
        })
      },
      calist_tab(tab_cur_) {
        if (tab_cur_ == 1) {
          this.number_list = 300;
        } else if (tab_cur_ == 2) {
          this.number_list = 1000
        } else {
          this.number_list = 3000
        }
        this.$nextTick(() => {
          this.tab_cur_ = tab_cur_;
        })
      },
      Refresh_() {
        this.Refresh_class = true;
        // var anchor = this.$el.querySelector("#header");
        // anchor.scrollIntoView({
        //   behavior: "smooth", // 平滑过渡
        //   block: "start", // 上边框与视窗顶部平齐
        // });
        this.SignIn_new()
        setTimeout(() => {
          Toast('刷新成功')
        }, 2000)

      },
      splice_(value) {
        let slice2 = "";
        if (value.length > 6) {
          slice2 = value
          slice2 = slice2.slice(0, 5)
          return slice2 + '...';
        } else {
          return value
        }
      },
      num_con(value) {
        let slice2 = "";
        if (value > 1000) {
          slice2 = value
          slice2 = slice2 / 1000
          slice2 = Math.round(slice2 * 10) / 10
          return slice2 + 'k';
        } else {
          return value
        }
      },
      //点击头像进入个人主页
      open_usrt(user) {
        if (window.isWeixin) {
          wx.miniProgram.navigateTo({
            url: "/pages/me/me?memberId=" + user,
          });
        } else {
          if (window.isiOS) {
            console.log("isiOS环境");
            window.webkit.messageHandlers.openProfile.postMessage({
              userId: user,
            });
          } else {
            console.log("安卓环境");
            app.openProfile(user);
          }
        }
      },
      getHeight(height) {
        this.Height = height;
      },
    },
  };
</script>
<style scoped lang="less">
  @auto: 0 auto;

  .px (@px, @attr: width) {
    @vw: (unit(round((@px / 8.28) * 100)) / 100);
    @{attr}:~"@{vw}vw";
  }

  .fs (@px, @attr: font-size) {
    @vw: (unit(round((@px / 8.28) * 100)) / 100);
    @{attr}:~"@{vw}vw";
  }

  .SignIn_new {
    width: 100vw;
    background: #382212;
    position: relative;
    overflow-x: hidden;

    .top_title {
      width: 100vw;
      .px(1046, height);
      background: url("https://img.xunyinjiaoyou.com/static/activity/SignIn_new/talent_bg@2x.png");
      background-size: contain;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;

      .title_header {
        .px(656);
        .px(64, margin-top);
      }

      .hader_image {
        .px(568);
        .px(358, height);
        .px(72, margin-top);
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;

        >img:nth-of-type(1) {
          z-index: 10;
          width: 100%;
        }

        >img:nth-of-type(2) {
          position: absolute;
          .px(212);
          .px(212, height);
          border-radius: 50%;
        }
      }

      .name_sex {
        .px(334);
        .px(98, height);
        .px(32, margin-top);
        display: flex;
        align-items: center;
        justify-content: center;
        background: url("https://img.xunyinjiaoyou.com/static/activity/SignIn_new/talent_name_frame@2x.png");
        background-size: contain;

        >img {
          .px(32);
          .px(12, margin-right)
        }

        span {
          .px(98, line-height);
          font-family: PingFang SC;
          font-weight: 400;
          color: #FFE39E;
          .fs(34);
        }
      }

      .num_first_rank1 {
        width: 100vw;
        height: 8vw;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        .fs(32);

      }

      .CurrentRose {
        position: absolute;
        .px(-114, bottom);
        .px(774);
        .px(229, height);
        background: url("https://img.xunyinjiaoyou.com/static/activity/SignIn_new/talent_buy_bg@2x.png") no-repeat;
        background-size: contain;

        >div {
          width: 88%;
          height: 100%;
          margin: @auto;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .left_information {
            display: flex;
            flex-direction: column;
            flex-shrink: 0;

            >span {
              font-family: PingFang SC;
              font-weight: 400;
              color: #FEFEFE;
              .fs(34)
            }

            >div {
              display: flex;
              align-items: center;
              .px(24, margin-top);

              >img {
                .px(60);
                .px(4, margin-right);
              }

              >span {
                .fs(50);
                font-family: PingFang SC;
                font-weight: bold;
                color: #FEFEFE;
              }
            }
          }

          .right_button {
            display: flex;
            flex: 1;
            justify-content: flex-end;
            .px(82, height);

            .signin {
              .px(82, height);
              .px(244);
              .px(74, line-height);
              text-align: center;
              background: url("https://img.xunyinjiaoyou.com/static/activity/SignIn_new/talent_sign_btn@2x.png") no-repeat;
              background-size: contain;
              .fs(30);
              font-family: PingFang SC;
              font-weight: 500;
              color: #FEFEFE;
              text-shadow: 0px 2px 2px #2B1307;


            }

            .over_signin {
              .px(82, height);
              .px(244);
              .px(74, line-height);
              text-align: center;
              background: url("https://img.xunyinjiaoyou.com/static/activity/SignIn_new/talent_sign_btn_ok@2x.png") no-repeat;
              background-size: contain;
              .fs(30);
              font-family: PingFang SC;
              font-weight: 500;
              color: #FEFEFE;
              flex-shrink: 0;
            }

            .timeDame_ {
              .px(82, height);
              .px(244);
              .px(74, line-height);
              text-align: center;
              background: url("https://img.xunyinjiaoyou.com/static/activity/SignIn_new/talent_sign_btn_ok@2x.png") no-repeat;
              background-size: contain;
              .fs(30);
              font-family: PingFang SC;
              font-weight: 500;
              color: #FEFEFE;
              flex-shrink: 0;

              .van-count-down {
                display: flex;
                justify-content: center;
                color: #FFF9EA;
                font-family: PingFang SC;
                font-weight: 400;
                .px(74, line-height);

                .item {
                  .fs(30);
                  font-family: PingFang SC;
                  font-weight: 500;
                  color: #FEFEFE;

                }
              }
            }

            .buy_meigui {
              flex-shrink: 0;
              .px(80, height);
              .px(156);
              .px(80, line-height);
              text-align: center;
              background: url("https://img.xunyinjiaoyou.com/static/activity/SignIn_new/talent_buy_btn@2x.png") no-repeat;
              background-size: contain;
              .fs(30);
              font-family: PingFang SC;
              font-weight: 500;
              color: #FEFEFE;
              .px(20, margin-left);
            }
          }
        }
      }
    }

    .Refresh {
      position: absolute;
      right: -4vw;
      top: -3vw;
      z-index: 2;
      .px(130);
      .px(68, height);
      background: url("https://img.xunyinjiaoyou.com/static/activity/SignIn_new/shuaxin_btn@2x.png") no-repeat;
      background-size: contain;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10;

      img {
        .px(30);
        .px(7, margin-right)
      }

      .Refresh_class {
        transform: rotate(1080deg);
        transition: 2s;
      }

      span {
        font-family: PingFang SC;
        font-weight: bold;
        color: #2B1307;
        .fs(30);
      }
    }

    .tab_switch {
      .px(770);
      margin: @auto;
      .px(154, margin-top);

      .tabbar {
        .px(680);
        .px(98, height);
        margin: @auto;
        display: flex;
        align-items: center;
        justify-content: space-between;

        >div {
          .px(314);
          .px(98, height);
          .px(106, line-height);
          text-align: center;
          font-family: PingFang SC;
          font-weight: bold;
          color: #FBEAC7;
          .fs(30);
          background: url("https://img.xunyinjiaoyou.com/static/activity/SignIn_new/talent_list_nor_btn@2x.png") no-repeat;
          background-size: contain;
        }

        .active {
          color: #5C2803;
          background: url("https://img.xunyinjiaoyou.com/static/activity/SignIn_new/talent_list_select_btn@2x.png") no-repeat;
          background-size: contain;
        }
      }
    }

    .countDown {
      width: 88%;
      .px(40, height);
      margin: @auto;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: nowrap;

      color: #FFF9EA;
      .fs(32);
      .px(40, margin-top);
      // .px(46, margin-bottom);

      .van-count-down {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #FFF9EA;
        font-family: PingFang SC;
        font-weight: 400;

        .item {
          border: 0px solid #F090FE;
          background: linear-gradient(0deg, #EBB750 0%, #FFF7DF 99%);
          .px(4, border-radius);
          .px(6, margin-left);
          .px(6, margin-right);
          // padding: 0px 3px;
          .px(50);
          .px(40, height);
          font-weight: bold;
          color: #2B1307;
          text-align: center;
        }
      }
    }


    .rank_list {
      .px(770);
      margin: @auto;
      .px(46, margin-top);
      display: flex;
      flex-direction: column;
      position: relative;

      .header_kuang {
        .px(770);
      }

      .center_list {
        .px(770);
        background: url("https://img.xunyinjiaoyou.com/static/activity/SignIn_new/talent_list_frame2@2x.png");
        background-size: contain;

        .center_list_nth {
          display: flex;
          flex-direction: column;
          .px(756);
          .px(1236, height);
          margin: @auto;
          .px(20, margin-top);
          overflow-y: scroll;

          .center_box {
            display: flex;
            flex-direction: column;
            flex-shrink: 0;
            margin: @auto;
            .px(20, margin-bottom);
            .px(756);

            .nth_moth_ {
              display: flex;
              align-items: center;
              font-family: PingFang SC;
              font-weight: 500;
              color: #FDE4AC;
              margin: @auto;
              .px(20, margin-bottom);
              .px(20, margin-top);
              .fs(30);
              .px(710);

              div {
                .px(10);
                .px(10, height);
                background: #FDE4AC;
                border-radius: 50%;
                .px(10, margin-right)
              }

            }

            .content_list {
              .img_biaoti {
                .px(232);
                .px(230, height);
                .px(22, margin-top);
                background: #FEFEFE;
                position: relative;
                .px(10, border-radius);
                float: left;
                display: flex;
                align-items: center;
                justify-content: center;
                .px(16, margin-left);
                overflow: hidden;

                >img:nth-of-type(1) {
                  width: 102%;
                  height: 103%;
                  position: absolute;
                  z-index: 2;
                }

                >img:nth-of-type(2) {
                  width: 100%;
                  height: 100%;
                  position: absolute;
                  z-index: 1;
                  .px(8, border-radius);
                }

                .name_time {
                  position: absolute;
                  bottom: 0.5%;
                  .px(40, height);
                  width: 98%;
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  z-index: 2;
                  background: url("https://img.xunyinjiaoyou.com/static/activity/SignIn_new/mengban2@2x.png") no-repeat;
                  background-size: cover;
                  z-index: 2;
                  border-radius: 0 0 4px 4px;

                  >div:nth-of-type(1) {
                    .fs(24);
                    font-family: PingFang SC;
                    font-weight: 400;
                    color: #FEFEFE;
                    position: absolute;
                    bottom: 1vw;
                    left: 1vw;
                    width: 15.4vw;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                  }

                  >div:nth-of-type(2) {
                    .fs(24);
                    font-family: PingFang SC;
                    font-weight: 400;
                    color: #FEFEFE;

                    position: absolute;
                    bottom: 1vw;
                    right: 1vw;
                    color: #ffffff;
                  }
                }
              }

              .img_biaoti_active {
                .px(480);
                .px(476, height);
                border-radius: 8px;
                overflow: hidden;

                >img:nth-of-type(1) {
                  width: 101%;
                  height: 101%;
                  position: absolute;
                  z-index: 2;
                  border-radius: 8px;
                }

                .name_time {
                  position: absolute;
                  bottom: 1px;
                  .px(80, height);
                  width: 99.5%;
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  z-index: 2;
                  background: url("https://img.xunyinjiaoyou.com/static/activity/SignIn_new/mengban@2x.png") no-repeat;
                  background-size: cover;
                  z-index: 2;

                  >div:nth-of-type(1) {
                    .fs(24);
                    font-family: PingFang SC;
                    font-weight: 400;
                    color: #FEFEFE;
                    position: absolute;
                    bottom: 1vw;
                    left: 1vw;
                    width: 15.4vw;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                  }

                  >div:nth-of-type(2) {
                    .fs(24);
                    font-family: PingFang SC;
                    font-weight: 400;
                    color: #FEFEFE;

                    position: absolute;
                    bottom: 1vw;
                    right: 1vw;
                    color: #ffffff;
                  }
                }
              }
            }
          }



        }

        .center_informa {
          .px(685);
          margin: @auto;
          display: flex;
          flex-direction: column;

          .single {
            .px(685);
            .px(158, height);
            border-bottom: 1px solid #FFFFFF30;
            display: flex;
            align-items: center;

            .rank_list2 {
              .px(44);
              .px(44, height);
              background: linear-gradient(82deg, rgba(241, 203, 116, 0.55) 0%, rgba(255, 217, 155, 0) 100%);
              .px(4, border-radius);
              font-family: PingFang SC;
              font-weight: 400;
              color: #FFFFFF;
              .fs(30);
              text-align: center;
              .px(44, line-height)
            }

            .header_border_ {
              .px(94);
              .px(94, height);
              .px(20, margin-left);
              .px(28, margin-right);
              border-radius: 50%;
              border: 1px solid #b1934e;
              overflow: hidden;

              img {
                width: 100%;
                height: 100%;
              }
            }

            .name_sex_ {
              display: flex;
              align-items: center;
              .fs(30);
              font-family: PingFang SC;
              font-weight: 400;
              color: #FFFFFF;

              >img {
                .px(32);
                .px(32, height);
                .px(12, padding-left);
              }
            }

            .right_mun {
              margin-left: auto;
              font-family: PingFang SC;
              font-weight: 400;
              color: #FFFFFF;
              .fs(32);
            }
          }
        }

        .month_list {
          .px(770);

          .most_quanbu {
            .px(748);
            .px(50, height);
            margin: @auto;
            .px(60, margin-top);
            display: flex;
            overflow-x: scroll;
            transition: all 1s;

            >.list_center_nor {
              flex-shrink: 0;
              .px(160);
              .px(50, height);
              position: relative;
              display: flex;
              align-items: center;
              justify-content: center;

              >img:nth-of-type(1) {
                .px(160);
                .px(50, height)
              }

              >img:nth-of-type(2) {
                .px(36);
                .px(50, height);
                position: absolute;
                .px(-18, right);
              }

              span {
                position: absolute;
                z-index: 1;
                font-family: PingFang SC;
                font-weight: bold;
                color: #2B1307;
                .fs(30);
              }
            }


          }

          .Current_month {
            .px(730);
            margin: @auto;
            .fs(30);
            font-family: PingFang SC;
            font-weight: bold;
            color: #FDE4AC;
            display: flex;
            align-items: center;

            >div {
              .px(10);
              .px(10, height);
              border-radius: 50%;
              background: #FDE4AC;
              .px(10, margin-right)
            }

          }

          // .tab-content_ {
          //   .px(756);
          //   .px(1226, height);
          //   margin: @auto;
          //   .px(32, margin-top);
          // }

          .tab-content_2 {
            .px(756);
            .px(1226, height);
            margin: @auto;
            .px(32, margin-top);
            overflow-y: scroll;

            .img_biaoti {
              .px(232);
              .px(230, height);
              .px(22, margin-top);
              background: #FEFEFE;
              position: relative;
              .px(10, border-radius);
              float: left;
              display: flex;
              align-items: center;
              justify-content: center;
              .px(16, margin-left);
              overflow: hidden;
              .px(8, border-radius);

              >img:nth-of-type(1) {
                width: 102%;
                height: 103%;
                position: absolute;
                z-index: 2;
              }

              >img:nth-of-type(2) {
                width: 100%;
                height: 100%;
                position: absolute;
                z-index: 1;
              }

              .name_time {
                position: absolute;
                bottom: 0%;
                .px(40, height);
                width: 98%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                z-index: 2;
                background: url("https://img.xunyinjiaoyou.com/static/activity/SignIn_new/mengban2@2x.png") no-repeat;
                background-size: cover;
                z-index: 2;
                border-radius: 0 0 4px 4px;

                >div:nth-of-type(1) {
                  .fs(24);
                  font-family: PingFang SC;
                  font-weight: 400;
                  color: #FEFEFE;
                  position: absolute;
                  bottom: 1vw;
                  left: 1vw;
                  width: 15.4vw;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                }

                >div:nth-of-type(2) {
                  .fs(24);
                  font-family: PingFang SC;
                  font-weight: 400;
                  color: #FEFEFE;

                  position: absolute;
                  bottom: 1vw;
                  right: 1vw;
                  color: #ffffff;
                }
              }
            }

            .img_biaoti_active {
              .px(480);
              .px(476, height);
              border-radius: 8px;
              overflow: hidden;

              >img:nth-of-type(1) {
                width: 102%;
                height: 101%;
                position: absolute;
                z-index: 2;
              }

              .name_time {
                position: absolute;
                bottom: 1px;
                .px(80, height);
                width: 99.5%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                z-index: 2;
                background: url("https://img.xunyinjiaoyou.com/static/activity/SignIn_new/mengban@2x.png") no-repeat;
                background-size: cover;
                z-index: 2;

                >div:nth-of-type(1) {
                  .fs(24);
                  font-family: PingFang SC;
                  font-weight: 400;
                  color: #FEFEFE;
                  position: absolute;
                  bottom: 1vw;
                  left: 1vw;
                  width: 15.4vw;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                }

                >div:nth-of-type(2) {
                  .fs(24);
                  font-family: PingFang SC;
                  font-weight: 400;
                  color: #FEFEFE;

                  position: absolute;
                  bottom: 1vw;
                  right: 1vw;
                  color: #ffffff;
                }
              }
            }
          }
        }
      }

      .bottom_kuang {
        .px(770);
      }
    }

    .Darentang {
      .px(546);
      .px(98, height);
      background: url("https://img.xunyinjiaoyou.com/static/activity/SignIn_new/talent_interest_title@2x.png") no-repeat;
      background-size: contain;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: SourceHanSansCN;
      font-weight: bold;
      color: #5C2803;
      .fs(34);
      margin: @auto;
      .px(60, margin-top);
      .px(38, margin-bottom);
    }

    .rank_prize {
      .px(770);
      margin: @auto;
      display: flex;
      flex-direction: column;

      .top_kuang_ {
        .px(770)
      }

      .center_rang_prize {
        .px(770);
        background: url("https://img.xunyinjiaoyou.com/static/activity/SignIn_new/talent_list_frame2@2x.png");
        background-size: contain;
        display: flex;
        flex-direction: column;
        align-items: center;

        .rank_title_ {
          .px(194);
          .px(64, margin-top);
          .px(52, margin-bottom);
        }

        .rank_title_2 {
          .px(274);
          .px(66, height);
          background: url("https://img.xunyinjiaoyou.com/static/activity/SignIn_new/gift_name_frame@2x.png") no-repeat;
          background-size: contain;
          font-family: PingFang SC;
          font-weight: 400;
          color: #FBEAC7;
          .fs(26);
          text-align: center;
          .px(66, line-height);
          .px(30, margin-bottom);
        }

        .ran1_texiao {
          .px(586);
          .px(196, height);
          margin: @auto;
          background: url("https://img.xunyinjiaoyou.com/static/activity/SignIn_new/gift_frame_into@2x.png") no-repeat;
          background-size: contain;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;

          >img {
            .px(426);
          }

          >.time_ {
            .fs(24);
            font-family: PingFang SC;
            font-weight: 400;
            color: #700408;
            position: absolute;
            top: 0;
            right: 0%;
            background: #F1CB74;
            border-radius: 0px 10px 0px 5px;
            padding: 1px 6px;
          }
        }

        .rank1_header_img {
          .px(560);
          .px(274, height);
          .px(50, margin-top);
          display: flex;
          justify-content: space-between;

          .rank_prize2 {
            .px(196);
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;

            .top_bjk_ce {
              .px(196);
              .px(196, height);
              display: flex;
              align-items: center;
              justify-content: center;
              background: url("https://img.xunyinjiaoyou.com/static/activity/SignIn_new/gift_frame@2x.png") no-repeat;
              background-size: contain;
              position: relative;

              img {
                .px(160)
              }

              div {
                position: absolute;
                .fs(24);
                font-family: PingFang SC;
                font-weight: 400;
                color: #700408;
                padding: 0px 3px;
                background: #F1CB74;
                border-radius: 0px 8px 0px 4px;
                // transform: scale(0.8);
                // right: -2%;
                // top: -2%;
                right: 0%;
                top: 0%;
              }
            }

            .name_prizr_ {
              .px(194);
              .px(46, height);
              background: url("https://img.xunyinjiaoyou.com/static/activity/SignIn_new/gift_name_frame@2x.png") no-repeat;
              background-size: contain;
              font-family: PingFang SC;
              font-weight: 400;
              color: #FBEAC7;
              .fs(26);
              text-align: center;
              .px(46, line-height)
            }
          }
        }

        .rank1_header_img23 {
          .px(88, margin-top);
          .px(36+68+196+38+46, height);

          .rank_prize2>img:nth-of-type(1) {
            .px(194);
            margin: @auto;
          }

          .rank_prize2>img:nth-of-type(2) {
            .px(16);
            margin: @auto;
          }

        }
      }

      .bottom_kuang_ {
        .top_kuang_ {
          .px(770)
        }
      }
    }
  }

  .res_rule_infor {
    .px(774);
    .px(299, height);
    background: url("https://img.xunyinjiaoyou.com/static/activity/SignIn_new/talent_rule_bg@2x.png") no-repeat;
    background-size: contain;
    margin: @auto;
    .px(82, margin-bottom);
    // display: flex;
    // align-items: center;

    div {
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 90%;
      height: 100%;
      margin: @auto;
      // margin-left: 25px;

      span {
        font-family: PingFang SC;
        font-weight: 400;
        color: #FDFBFA;
        .fs(30);
        .px(50, line-height)
      }
    }
  }

  .mode_meigui_buy {
    .px(720);
    .px(750, height);
    background: #2B1307;
    border: 1px solid #FEF1AE;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    .center_info {
      .px(700);
      .px(730, height);
      background: #2B1307;
      border: 0.5px solid rgba(255, 255, 255, 0.4);

      .list_imforin {
        .px(640);
        margin: @auto;
        display: flex;
        flex-direction: column;

        .hui_Price {
          display: flex;
          width: 100%;
          .px(276, height);
          .px(64, margin-top);
          justify-content: space-between;

          .first_ont {
            .px(276, height);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;

            .discount {
              text-align: center;
              .px(146);
              .fs(26);
              font-family: PingFang SC;
              font-weight: bold;
              color: #2B1307;
              background: #FDE4AC;
              .px(10, border-radius)
            }

            .huan_into {
              .px(194);
              .px(224, height);
              display: flex;
              flex-direction: column;
              align-items: center;
              .px(10, border-radius);
              border: 1px solid #FDE4AC;
              position: relative;

              >img:nth-of-type(1) {
                .px(114);
                .px(26, margin-top)
              }

              >img:nth-of-type(2) {
                .px(100);
                .px(6, margin-bottom)
              }

              span {
                .fs(32);
                font-family: PingFang SC;
                font-weight: bold;
                color: #FEF8E8;
              }

              >div {
                .px(46);
                .px(36, height);
                background: #FDE4AC;
                border-radius: 0px 2px 2px 6px;
                position: absolute;
                top: 0%;
                right: 0%;
                display: flex;
                align-items: center;
                justify-content: center;
                .fs(16);
                font-weight: 900;
              }
            }
          }
        }

        .ipt_npt {
          width: 90%;
          .px(90, height);
          .px(10, border-radius);
          background: #FFFFFF30;
          border: 0;
          margin: @auto;
          .px(50, margin-top);
          padding-left: 5%;
          padding-right: 5%;
          font-family: PingFang SC;
          font-weight: 400;
          color: #FEF8E8;
          .fs(30);
        }

        .ipt_npt::-webkit-input-placeholder {
          .fs(30);
          font-family: PingFang SC;
          font-weight: 400;
          color: #FEF8E8;
        }

        >.span_init {
          font-family: PingFang SC;
          font-weight: 400;
          color: #FEF8E8;
          .fs(24);
          .px(30, padding-top);
          width: 100%;
          display: flex;
          justify-content: space-between;
        }

        .btn_gift {
          .px(268);
          .px(92, height);
          background: url("https://img.xunyinjiaoyou.com/static/activity/SignIn_new/popup_buy_btn@2x.png") no-repeat;
          background-size: contain;
          text-align: center;
          .px(82, line-height);
          .fs(41);
          font-family: PingFang SC;
          font-weight: bold;
          color: #FEFEFE;
          margin: @auto;
          .px(62, margin-top);
        }
      }
    }

    .close_btn {
      .px(56);
      .px(56, height);
      position: absolute;
      right: 0%;
      .px(-108, top)
    }

    .close_btn2 {
      .px(462);
      .px(114, height);
      background: url("https://img.xunyinjiaoyou.com/static/activity/SignIn_new/popup_buy_tiltle@2x.png") no-repeat;
      background-size: contain;
      position: absolute;
      .px(-67, top);
      text-align: center;
      .px(88, line-height);
      .fs(46);
      font-family: PingFang SC;
      font-weight: bold;
      color: #2B1307;
    }

    .top_back {
      .px(722);
      position: absolute;
      .px(-10, top)
    }

    .bottom_back {
      .px(723);
      position: absolute;
      .px(-6, bottom)
    }
  }

  /deep/ .van-popup {
    overflow: initial;
    background: 00000000;
  }
</style>